<template>
  <div v-if="listData" class="content-box ">
    <div class="title-box">
      <div class="title fs-22">
        <span>{{ listData.title }}</span>
        <div v-if="$store.getters.userId === listData.user.userId">
          <el-button class="btn-color" type="success" size="medium" @click="edit">编辑</el-button>
          <el-button size="medium" @click="del">删除</el-button>
        </div>
      </div>
      <div class="classify-box marginT15">
        <div class="classify">
          <span>发起人：{{ listData.user.name }}</span>
        </div>
      </div>
      <div class="classify-box marginT10">
        <div class="classify">
          <span v-if="listData.GROWTH_CLASSIFY.itemName">{{ listData.GROWTH_CLASSIFY.itemName }}</span>
          <span v-if="listData.STAGE.itemName">/{{ listData.STAGE.itemName }}</span>
          <span v-if="listData.SUBJECT.itemName">/{{ listData.SUBJECT.itemName }}</span>
          <span v-for="(item, index) in listData.cateTags" :key="index">{{index>0?',':''}}&nbsp;{{ item.tagsName }}</span>
        </div>
      </div>

      <div class="marginT15">
        <el-tag
          v-for="(item, index) in listData.colTags"
          :key="index"
          size="small"
          :class="index !== 0 ? 'marginL20' : ''"
          type="success"
        >{{ item.tagsName }}</el-tag>
      </div>

      <div class="classify-box marginT15">
        <div class="classify">
          <span v-if="listData.allowSignup">允许报名</span>
          <span v-else>不允许报名</span>
        </div>
        <div class="classify marginL40">
          <span>{{ listData.startTime }} 至 {{ listData.endTime }}</span>
        </div>
      </div>
    </div>

    <div v-if="enrollNumTotal" class="userList-box flex-box center marginT40">
      <ul class="userList flex-box">
        <li v-for="(item, index) in enrollList" v-if="index <= 4" :key="index">
          <el-avatar v-if="item.avatarUrl" fit="cover" size="medium" :src="item.avatarUrl" />
          <el-avatar
            v-else
            fit="cover"
            size="medium"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          />
        </li>
        <li class="fs-16 line-height40">
          <template v-if="enrollNumTotal > 4">
            <span />
            <span />
            <span />
            等
          </template>
          {{ enrollNumTotal }}人已报名
        </li>
        <li v-if="enrollNumTotal>0" class="fs-16 line-height40">
          <el-button type="primary" @click="openParticipate()">查看详情</el-button>
        </li>
      </ul>
    </div>

    <el-dialog
      title="参与人"
      :visible.sync="participateVisiable"
      :show-close="false"
      :append-to-body="false"
      :lock-scroll="false"
      custom-class="participateDialog"
    >
      <ParticipantItem :list="ParticipantItem" comment-type="TEACHRESEARCH" />
      <div class="ov">
      <Pagination float="right" :total="ParticipantItem.length" @pagiontaion="getParticipantItemPage" />
        </div>
    </el-dialog>

    <div class="content marginT30">
      <div class="title">教研详情</div>
      <div class="block imgbox marginT30">
        <el-image :src="listData.coverImageUrl">
          <div slot="placeholder" class="image-slot">
            加载中
            <span class="dot">...</span>
          </div>
        </el-image>
      </div>
      <p v-html="listData.intro" />

      <div class="button-box">
        <div
          v-clipboard:copy="copyUrl"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          class="btn"
        >
          <el-image class="img" :src="require('@/assets/images/share.png')" />分享
        </div>
        <div
          class="btn"
          :class="listData.isCollected ? 'active' : ''"
          @click="getCollectTeachingResearch"
        >
          <el-image
            v-if="listData.isCollected"
            class="img"
            :src="require('@/assets/images/collected.png')"
          />
          <el-image v-else class="img" :src="require('@/assets/images/collect.png')" />收藏
        </div>
      </div>
    </div>

    <div class="content marginT30">
      <div class="title">流程安排</div>

      <div v-if="listData.stepList && listData.stepList.length > 0">
        <div v-for="(item, index) in listData.stepList" :key="index">
          <div class="step-box">
            <div class="step-title-main fs-14">{{ item.title }}</div>
            <div class="step-time fs-12 line-height30">{{ item.startTime }} 至 {{ item.endTime }}</div>
          </div>
          <ul v-if="item.activities &&item.activities.length > 0" class="step">
            <li v-for="(aItem, aIndex) in item.activities" :key="aIndex">
              <el-row class="box">
                <el-col :span="8">
                  <div class="step-title fs-12">
                    <span class="text-s-o" :title="aItem.title">{{ aItem.title }}</span>
                    <el-tag
                      v-if="aItem.type === 'TEACHING_RESEARCH'"
                      size="small"
                      class="marginL20"
                      type="success"
                    >教研</el-tag>
                    <el-tag
                      v-if="aItem.type === 'LIVE_BORADCAST'"
                      size="small"
                      class="marginL20"
                      type="success"
                    >在线课程</el-tag>
                    <el-tag
                      v-if="aItem.type === 'MEETING'"
                      size="small"
                      class="marginL20"
                      type="success"
                    >会议</el-tag>
                    <el-tag
                      v-if="aItem.type === 'PREPARE_LESSON'"
                      size="small"
                      class="marginL20"
                      type="success"
                    >备课</el-tag>
                  </div>
                </el-col>
                <el-col :span="4" class="text-center">
                  <span
                    v-if="aItem.progress === 'NOT_STARTED'"
                    class="step-status fs-12"
                  >{{ aItem.startTime }}</span>
                  <span v-if="aItem.progress === 'STARTED'" class="step-status fs-12 green">进行中</span>
                  <span v-if="aItem.progress === 'ENDED'" class="step-status blue fs-12">已结束</span>
                </el-col>
                <el-col :span="2" class="text-center">
                  <div class="step-btn fs-12">
                    <span v-if="aItem.progress === 'NOT_STARTED'" style="color:rgba(0,0,0,0.45);">期待</span>
                    <el-button
                      v-if="aItem.progress === 'STARTED'"
                      size="small"
                      type="success"
                      @click="goLive(aItem)"
                    >进入</el-button>
                    <el-button
                      v-if="aItem.progress === 'ENDED'"
                      size="small"
                      type="danger"
                      @click="openLive(aItem)"
                    >回放</el-button>
                  </div>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="text-center marginT20">暂无流程步骤</div>
    </div>

    <!-- <div class="content marginT30">
      <div class="title">文件内容</div>
      <ul class="file-box">
        <li v-for="(item, index) in 5" :key="index">
          <div class="box">
            <div class="left">
              <el-image
                style="width: 42px; height: 42px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="cover"
              />
            </div>
            <div class="center">
              <div class="name fs-14 line-height20">讲解文言文的思路和技巧.pdf</div>
              <div class="describe fs-12 line-height20">
                <span class="green">我的文件</span>
                <span class="marginL40">2020.02.11 14:23</span>
              </div>
            </div>

            <div class="right marginL40">
              <el-image
                style="width: 24px; height: 24px; cursor: pointer;"
                :src="require('@/assets/images/icon-del.png')"
                fit="cover"
              />
            </div>
          </div>
        </li>
      </ul>
    </div>-->
    <!-- v-if="listData.resultReport&& listData.resultReport.reportId" -->

    <div v-if="listData.resultReport&& listData.resultReport.reportId" class="content marginT30">
      <div class="title">教研报告</div>
      <div class="teachingStatus" @click="openTeaching">
        <div class="h4 fs-14 text-s-o">{{ listData.resultReport.title }}</div>
        <div class="green fs-14">查看详情</div>
      </div>
    </div>

    <Comment :list="listData" :comment-type="commentType" />
  </div>
</template>

<script>
import {
  getTeachingResearchDetail,
  collectTeachingResearch,
  playBack,
  webCastUrl,
  enroll,
  delTeachingResearch,
  getParticipantItemPage
} from '@/api/activity'

import Pagination from '@/components/Pagination'
import ParticipantItem from '../live/components/ParticipantItem'
import Comment from '@/components/comment'
export default {
  components: {
    Comment,
    Pagination,
    ParticipantItem
  },
  data () {
    return {
      enrollNumTotal: 0,
      ParticipantItem:[],
      copyUrl: window.location.href,
      listData: null,
      textarea: null,
      sources: null,
      participateVisiable:false,
      commentType: 'TEACHING_RESEARCH'
    }
  },

  created () {
    console.log(Boolean(this.$route.query.isCollect))
    this.init()
  },
  methods: {
    init () {
      getTeachingResearchDetail({
        activityId: this.$route.query.activityId
      }).then(res => {
        res.data.GROWTH_CLASSIFY = res.data.categoryList.filter(item => item.groupEnum === 'GROWTH_CLASSIFY')[0] || {
          cateId: '',
          groupEnum: '',
          itemCode: '',
          itemName: ''
        } // GROWTH_CLASSIFY
        res.data.STAGE = res.data.categoryList.filter(item => item.groupEnum === 'STAGE')[0] || {
          cateId: '',
          groupEnum: '',
          itemCode: '',
          itemName: ''
        } // STAGE
        res.data.SUBJECT = res.data.categoryList.filter(item => item.groupEnum === 'SUBJECT')[0] || {
          cateId: '',
          groupEnum: '',
          itemCode: '',
          itemName: ''
        } // SUBJECT
        res.data.subjectId = res.data.activityId
        this.listData = res.data
        console.log('教研详情:', res.data)

        // this.getPlayBack()
        this.getEnroll()
        // this.getCommentPage()
      })
    },

    open () {
      if (
        this.listData.status === 'NOT_STARTED' &&
        this.listData.status === 'ONGOING'
      ) {
        this.getWebCastUrl()
      } else if (this.listData.status === 'END') {
        this.$message({
          message: '活动已结束',
          type: 'warning'
        })
      } else {
        this.$message({
          message: '活动不在时间范围内不允许开启在线课程',
          type: 'warning'
        })
      }
    },
    openParticipate(){
         this.participateVisiable = !this.participateVisiable
        this.getParticipantItemPage()

      },
      getParticipantItemPage(page = 1, pageSize = 10){
        getParticipantItemPage({
          condition: Number(this.listData.activityId),
          // orderBys:[{asc:true,column:''}],
          pager: {
            page,
            pageSize
          }
        }).then(res=>{
          this.ParticipantItem = res.data.records
          //this.enrollNumTotal = res.data.total
        })
      },
    openTeaching () {
      this.$router.push({
        name: 'uploadResearchReport',
        query: { activityId: this.listData.resultReport.reportId }
      })
    },
    goLive (item) {
      console.log('进入', item)
      return
      this.$router.push({
        name: 'uploadResearchReport',
        query: { activityId: this.listData.resultReport.reportId }
      })
    },
    openLive (item) {
      console.log('回放：', item)
      return
      webCastUrl(item.activityId).then(res => {
        window.open(res.data, '_blank')
      })
    },
    edit () {
      if (this.listData.status === 'END') {
        this.$message({
          message: '活动已结束',
          type: 'warning'
        })
      } else {
        this.$router.push({
          name: 'pushTeaching',
          query: { activityId: this.listData.activityId }
        })
      }
    },
    del () {
      const msg = '确认是否删除该教研！'
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delTeachingResearch({
            activityId: this.listData.activityId
          }).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.$router.push({
              name: 'ActivityList',
              query: { activeTabName: 'TeachingResearch' }
            })
          })
        })
        .catch(() => {
          // 取消操作
          console.log('cancel')
        })
    },

    getPlayBack () {
      playBack(this.listData.activityId).then(res => {
        this.sources = res.data
      })
    },
    getEnroll (page = 1, pageSize = 10) {
      enroll({
        condition: this.listData.activityId,
        pager: {
          page,
          pageSize
        }
      }).then(res => {
        this.enrollList = res.data.records
        this.enrollData = res.data
        this.enrollNumTotal = res.data.total
      })
    },
    getWebCastUrl () {
      webCastUrl(this.listData.activityId).then(res => {
        window.open(res.data, '_blank')
      })
    },

    getCollectTeachingResearch () {
      console.log(this.listData.isCollected)
      this.listData.isCollected = !this.listData.isCollected
      collectTeachingResearch({
        activityId: this.listData.activityId,
        collect: this.listData.isCollected
      }).then(res => {
        this.listData.isCollected
          ? this.$message({
            message: '收藏成功',
            type: 'success'
          })
          : this.$message({
            message: '收藏取消',
            type: 'success'
          })
      })
    },

    onCopy (e) {
      // console.log("copyUrl:", this.copyUrl);
      this.$message({
        message: '分享链接复制成功',
        type: 'success'
      })
    },
    onError (e) {
      this.$message.error('复制失败')
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  padding: 0 40px;
 .userList-box {
      display: flex;
      justify-content: center;
      padding: 0 120px;
      .userList {
        display: flex;
        li {
        }
        li:not(:first-child) {
          margin-left: 12px;
        }
        li:last-child {
          color: rgba(0, 0, 0, 0.65);
          display: flex;
          align-items: center;
          margin-left: 20px;
          span {
            margin-right: 4px;
            display: flex;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            background: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  .title-box {
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-top: 40px;
    padding: 40px;
    .title {
      display: flex;
      justify-content: space-between;
    }

    .classify-box {
      display: flex;
      .classify,
      .obj {
        color: rgba(0, 0, 0, 0.45);
      }
    }

    .live-obj {
      margin-top: 24px;
      display: flex;
      .info {
        margin-left: 8px;
        .name {
          color: rgba(0, 0, 0, 0.55);
        }
        .scholl {
          margin-top: 3px;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }

  .content {
    background: white;
    border-radius: 16px;
    padding-bottom: 40px;
    .title {
      padding: 0 42px;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e2e2e2;
    }
    p {
      padding: 0 120px;
      margin-top: 40px;

      font-size: 16px;
      font-family: AppleSystemUIFont;
      color: rgba(0, 0, 0, 0.45);
      line-height: 24px;
    }
    .imgbox {
      display: flex;
      justify-content: center;
      padding: 0 120px;
    }
    .userList-box {
      display: flex;
      justify-content: center;
      padding: 0 120px;
      .userList {
        display: flex;
        li {
        }
        li:not(:first-child) {
          margin-left: 12px;
        }
        li:last-child {
          color: rgba(0, 0, 0, 0.65);
          display: flex;
          align-items: center;
          margin-left: 20px;
          span {
            margin-right: 4px;
            display: flex;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            background: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }

    .button-box {
      display: flex;
      justify-content: center;
      margin-top: 40px;
      border-top: 1px solid rgba(0, 0, 0, 0.15);
      padding-top: 40px;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 40px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 6px;
        cursor: pointer;

        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 40px;
      }
      .btn:not(:first-child) {
        margin-left: 40px;
      }
      .btn.active {
        border: 1px solid #54b87b;
        color: #54b87b;
      }
      .btn.active:last-child {
        border: 1px solid #f1bf25;
        color: #f1bf25;
      }
      .img {
        width: 24px;
        height: 24px;
        overflow: hidden;
        margin-right: 5px;
      }
    }
  }

  .comment-box {
    margin-top: 24px;
    background-color: white;
    border-radius: 16px;
    padding: 40px 0;

    .comment-val {
      border-radius: 8px;
    }
    .comment {
      border-top: 1px solid #dbdadd;
      padding: 40px 0;
      display: flex;
      position: relative;

      .left {
        position: relative;
        padding-left: 40px;
        padding-right: 16px;
        .img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .left:after {
        content: "";
        display: block;
        clear: both;
        width: 100%;
        height: 3px;
        background-color: white;
        position: absolute;
        bottom: -41px;
        left: 0;
        z-index: 10;
      }
      .center {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
        padding-right: 40px;
        .name {
          font-size: 16px;
          font-family: AppleSystemUIFont;
          color: rgba(0, 0, 0, 0.85);
          line-height: 24px;
        }
        .describe {
          font-size: 16px;
          font-family: AppleSystemUIFont;
          color: rgba(0, 0, 0, 0.45);
          line-height: 24px;
          display: flex;
          span {
            display: block;
            color: rgba(0, 0, 0, 0.85);
          }

          span:last-child {
            flex: 1;
            color: rgba(0, 0, 0, 0.45);
            padding-left: 20px;
          }
        }
      }
      .right {
        padding-right: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .time {
          font-size: 16px;
          font-family: AppleSystemUIFont;
          color: rgba(0, 0, 0, 0.25);
          line-height: 24px;
        }
      }
    }

    .replyComment {
      padding-left: 84px;

      .left:after {
        left: -84px;
      }
    }
    .more-txt {
      position: absolute;
      left: 50%;
      bottom: 0;
      color: #54b87b;
      cursor: pointer;
      padding: 4px 10px;
    }
    .more {
      border-top: 1px solid #dbdadd;
      cursor: pointer;
      margin-top: 5px;
      padding-top: 40px;
      text-align: center;
      font-size: 16px;
      font-family: AppleSystemUIFont;
      color: rgba(84, 184, 123, 1);
      line-height: 24px;
    }
  }

  .teachingStatus {
    border-radius: 16px;
    padding: 0 40px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    .h4 {
      font-size: 20px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: rgba(29, 29, 29, 1);
      flex: 1;
    }
    .green {
      color: #54b87b;
    }
  }

  .step-box {
    margin-top: 25px;
    padding: 0 40px;
    .step-title-main {
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 0.65);
    }
    .step-time {
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 0.25);
    }
  }
  .step {
    li {
      padding: 0 40px;
      .box {
        display: flex;
        align-items: center;
        line-height: 54px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);

        .step-title {
          font-family: MicrosoftYaHei;
          color: rgba(0, 0, 0, 0.65);
          display: flex;
          align-items: center;
        }
        .step-status {
          color: rgba(0, 0, 0, 0.45);
        }
        .step-status.blue {
          color: #32a1da;
        }
        .step-status.green {
          color: #54b87b;
        }
        .step-status.gray {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    li:nth-child(even) {
      background-color: #fbfbfb;
    }
  }

  .file-box {
    li {
      padding: 0 40px;
      .box {
        display: flex;
        align-items: center;
        height: 72px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);

        .left {
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        .center {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 8px;
          .name {
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.65);
          }
          .describe {
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.45);
            margin-top: 5px;
          }
          .describe.green {
            color: #54b87b;
          }
        }
        .right {
          display: none;
        }
      }
    }
    li:nth-child(even) {
      background-color: #fbfbfb;
    }
    li:hover .right {
      display: block;
    }
  }
}
</style>
